<template>
  <div id="app">
    <div class="nav" v-show="$route.meta.keep">
      <div id="search">
  <el-input placeholder="请输入内容" v-model="content">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
      </div>
      <div id="hudle">
        <div id="user">
          <el-dropdown>
            <div>个人中心</div>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/user">
                <el-dropdown-item>我的信息</el-dropdown-item>
              </router-link>
              <div @click="loginout()">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div id="index">
          <router-link to="/">首页</router-link>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "app",
  data(){
      return{
          content:null,
      }
  },
  methods: {
    loginout() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>


<style lang="scss" >
@media screen and (min-width: 980px) {
  body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
  }
  .nav {
    margin-bottom: 4px;
    position: fixed;
    top: 0;
    z-index: 10;
    line-height: 52px;
    height: 52px;
    width: 100%;
    min-width: 1000px;
    background-color: #fff;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12);

    a:hover {
      color: #121212;
      text-decoration: none;
    }

    a {
      color: #8590a6;
      text-decoration: none;

      &.router-link-exact-active {
        color: #2196f3;
      }
    }
  }
  #search {
    float: left;
    width: 49%;
    margin-left: 35%;
    margin-right: 0px;
  }
  #index {
    cursor: pointer;
    float: right;
    margin-right: 42px;
  }
  #seek:focus {
    border-width: 1px;
    border-color: #2196f3;
    box-shadow: 0 0 1px #2196f3;
    caret-color: #2196f3;
    font-weight: 10;
  }
  .usercenter {
    display: none;
  }
  .el-button {
    height: 36px;
    width: 80px;
  }
  .el-dropdown-item:hover {
    text-decoration: none;
  }
  .el-dropdown-menu__item:hover {
    text-decoration: none;
  }
  a {
    text-decoration: none;
  }

  #user {
    cursor: pointer;
    float: right;
    margin-right: 30px;
  }

  #app {
    font-size: 16px;
  }
  
}
@media screen and(max-width:980px) {
  body {
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
  }
  input {
    padding-left: 8px;
    width: 70%;
    height: 32px;
    font-weight: 10;
    color: #8590a6;
    font-size: 1em;
    font-weight: 50;
    border: 1px solid #dcdfe6;
    background: #fff;
    outline: none;
    border-radius: 18px;
    transition: all 0.2s;
  }
  #seek:focus {
    border-width: 1px;
    border-color: #2196f3;
    box-shadow: 0 0 1px #2196f3;
    caret-color: #2196f3;
    font-weight: 10;
  }
  .el-button {
    width: 25%;
    float: right;
    height: 36px;
  }

  .nav {
    padding-top: 8px;
    height: 44px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 10;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.04);
  }
  #search {
    width: 80%;
    margin: auto;
  }

  #user {
    cursor: pointer;
    float: right;
    width: 50%;
    text-align: center;
  }
  #index {
    cursor: pointer;
    float: left;
    width: 50%;
    text-align: center;
  }
  a {
    text-decoration: none;
  }
  #hudle {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 48px;
    line-height: 48px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.04);
  }
}
</style>
